<template>
  <!-- 播放列表的容器 -->
  <div class="play-list">
    <!-- 如果 `title` 存在，显示播放列表的标题 -->
    <div class="play-title" v-if="title">{{ title }}</div>
    <!-- 播放列表的主体 -->
    <ul class="play-body">
      <!-- 遍历 `playList` 数组，渲染每一个播放项 -->
      <li class="card-frame" v-for="(item, index) in playList" :key="index">
        <!-- 每一个播放项的卡片部分，点击时触发 `goAblum` 方法跳转到专辑详情 -->
        <div class="card" @click="goAblum(item)">
          <!-- 显示播放项的封面图片，使用 `attachImageUrl` 方法拼接图片路径 -->
          <el-image class="card-img" fit="contain" :src="attachImageUrl(item.pic)" />
          <!-- 遮罩层，悬停时显示播放按钮，点击触发 `goAblum` 跳转到专辑详情 -->
          <div class="mask" @click="goAblum(item)">
            <!-- 播放按钮图标 -->
            <ding-dong-icon class="mask-icon" :icon="BOFANG"></ding-dong-icon>
          </div>
        </div>
        <!-- 显示播放项的名称或标题 -->
        <p class="card-name">{{ item.name || item.title }}</p>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, toRefs } from "vue";

import DingDongIcon from "@/components/layouts/DingDongIcon.vue";
import mixin from "@/mixins/mixin";
import { Icon } from "@/enums";
import { HttpManager } from "@/api";

export default defineComponent({
  components: {
    // 引入 DingDongIcon 组件
    DingDongIcon,
  },
  props: {
    // `title` 为字符串类型，表示列表的标题
    title: String,
    // `playList` 为数组类型，表示播放项列表
    playList: Array,
    // `path` 为字符串类型，表示跳转的路径
    path: String,
  },
  setup(props) {
    // 获取当前组件的实例
    const { proxy } = getCurrentInstance();
    // 从混合中获取 `routerManager` 方法用于路由跳转
    const { routerManager } = mixin();
    // 使用 `toRefs` 使 `props` 的 `path` 变为响应式对象
    const { path } = toRefs(props);

    // 定义跳转到专辑详情页的方法
    function goAblum(item) {
      // 将播放项的详细信息存入 Vuex 状态管理器
      proxy.$store.commit("setSongDetails", item);
      // 调用 `routerManager` 跳转到专辑详情页，传递路径和专辑 ID
      routerManager(path.value, { path: `/${path.value}/${item.id}` });
    }

    return {
      // 定义播放图标常量
      BOFANG: Icon.BOFANG,
      // 返回跳转方法 `goAblum`
      goAblum,
      // 返回拼接图片路径的方法
      attachImageUrl: HttpManager.attachImageUrl,
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/css/var.scss";
@import "@/assets/css/global.scss";

.play-list {
  // 设置列表的左右内边距
  padding: 0 1rem;

  .play-title {
    height: 60px;
    line-height: 60px;
    font-size: 28px;
    font-weight: 500;
    text-align: center;
    color: $color-black;
    box-sizing: border-box;
  }

  .play-body {
    // 使用 `layout` 混合设置弹性布局，子元素从左对齐并允许换行
    @include layout(flex-start, stretch, row, wrap);
  }
}

.card-frame {
  // 卡片容器样式
  .card {
    position: relative;
    height: 0;
    padding-bottom: 100%;// 设置高度为宽度的100%比例
    overflow: hidden;
    border-radius: 5px;

    .card-img {
      width: 100%;// 图片宽度为容器的 100%
      transition: all 0.4s ease; // 设置平滑的缩放动画
    }
  }

  .card-name {
    // 限制名称显示两行，超出部分省略
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: 0.5rem 0;
  }

  // 悬停时图片放大效果
  &:hover .card-img {
    transform: scale(1.2);
  }
}

.mask {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 5px;
  background-color: rgba(52, 47, 41, 0.4);
  @include layout(center, center);
  transition: all 0.3s ease-in-out;
  opacity: 0;

  .mask-icon {
    // 播放图标样式，设置大小和颜色
    @include icon(2em, rgba(240, 240, 240, 1));
  }

  // 悬停时显示遮罩层
  &:hover {
    opacity: 1;
    cursor: pointer;
  }
}

@media screen and (min-width: $sm) {
  // 大屏幕下卡片的宽度设置
  .card-frame {
    width: 18%;
    margin: 0.5rem 1%;
  }
}

@media screen and (max-width: $sm) {
  // 小屏幕下卡片的宽度设置
  .card-frame {
    width: 46%;
    margin: 0.5rem 2%;
  }
}
</style>
